<template>
  <div class="poster_edit">
    <el-form class="poster_edit_left">
      <div class="box">
        <el-form-item label="海报名称" label-width="80px">
          <el-input v-model="posterName" type="text"></el-input>
        </el-form-item>
        <el-form-item label="内容性质" label-width="80px">
          <el-select v-model="attrId" clearable>
            <el-option v-for="item,n in attrs" :value="item.id" :label="item.name" :key="item.id.toString()"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="box" v-show="avatarRangeVisible">
        <span class="demonstration">头像大小</span>
        <el-slider v-model="avatarSize" show-input :max="300"></el-slider>
      </div>
      <div class="box" v-show="qrRangeVisible">
        <span class="demonstration">二维码大小</span>
        <el-slider v-model="qrSize" show-input :max="500"></el-slider>
      </div>
      <div class="box">
        <el-form-item label="背景图片">
          <el-button type="primary" size="small" @click="dialog=true">从素材库选择</el-button>
        </el-form-item>
      </div>
      <el-row>
        <el-checkbox v-model="groupType" :true-label="1" :false-label="0">上传到事业部内容库<i style="color:#bbb">（直接上传，不审核）</i></el-checkbox>
      </el-row>
      <el-row>
        <el-checkbox v-model="commonType" :true-label="1" :false-label="0">上传到公共内容库<i style="color:#bbb">（将提交品牌VI审核）</i></el-checkbox>
      </el-row>
      <el-row>
        <el-button v-if="userInfo.uid === poster.uid" type="primary" @click="handleSave()">保存</el-button>
        <el-button type="primary" @click="handleSave(true)">{{id=='new'?"保存":"另存为"}}</el-button>
      </el-row>
    </el-form>
    <div class="poster_edit_preview">
      <img ref="bgImg" :src="bg" alt="" @load="handleBgLoad">
      <div ref="avatar" class="avatar" v-drag @click="handleIconSize('avatar')">
        <i class="icon icon-avatar" :style="{fontSize: avatarSize + 'px'}"></i>
        <span class="control enlarge" @click="avatarSize = avatarSize + 2">放大</span>
        <span class="control narrow" @click="avatarSize = avatarSize - 2">缩小</span>
      </div>
      <div ref="qr" class="qr" v-drag @click="handleIconSize('qr')">
        <i class="icon icon-erweima" :style="{fontSize: qrSize + 'px'}"></i>
        <span class="control enlarge" @click="qrSize = qrSize + 2">放大</span>
        <span class="control narrow" @click="qrSize = qrSize - 2">缩小</span>
      </div>
    </div>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="dialog">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectImage">确定</el-button>
        <el-button @click="dialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  import dialogImage from '@/components/common/content/dialogImage'
  export default {
    components: {dialogImage},
    data () {
      return {
        id: this.$route.params.id,
        posterName: '',
        bg: '',
        attrId: '',
        avatarSize: 50,
        groupType: '0',
        commonType:'0',
        qrSize: 100,
        dialog: false,
        iconSize: 0,
        avatarRangeVisible: false,
        qrRangeVisible: false
      }
    },
    mounted () {
      this.initPage ()
    },
    destroyed () {
      this.SET_CUR_POSTER({})
    },
    computed: {
      ...mapState({
        userInfo: state => state.userInfo,
        attrs: state => state.contentManage.contentType,
        poster: state => state.contentManage.curPoster,
        selected: state => state.sourceManage.selected
      })
    },
    methods: {
      ...mapActions(['addPoster', 'getPoster', 'updatePoster', 'getContentTypes']),
      ...mapMutations(['SET_CUR_POSTER']),
      async initPage () {
        this.getContentTypes()
        if (this.id !== 'new') {
          const res = await this.getPoster(this.id)
          this.posterName = this.poster.posterName
          this.bg = this.poster.posterUrl
          this.avatarSize = this.poster.iconWidth
          this.qrSize = this.poster.qrCodeWidth
          // this.commonType = this.poster.commonType
          // this.groupType = this.poster.groupType
          this.attrId = +this.$route.query.cs === 1 ? '' : this.poster.attributes
          this.resetOffset = true
        }
      },
      handleSelectImage () {
        this.bg = this.selected.url
        this.dialog = false
      },
      handleBgLoad () {
        const $img = this.$refs.bgImg
        this.scale =  $img.naturalWidth / $img.width
        if (this.resetOffset) {
          this.$refs.avatar.style.left = this.poster.iconleft / this.scale + 'px'
          this.$refs.avatar.style.top = this.poster.iconTop / this.scale + 'px'
          this.$refs.avatar.style.bottom = 'auto'
          this.avatarSize = Math.round(this.poster.iconWidth / this.scale)
          this.$refs.qr.style.left = this.poster.qrCodeleft / this.scale + 'px'
          this.$refs.qr.style.top = this.poster.qrCodeTop / this.scale + 'px'
          this.$refs.qr.style.bottom = 'auto'
          this.qrSize = Math.round(this.poster.qrCodeWidth / this.scale)
          this.resetOffset = false
        }
      },
      async handleSave (ifSaveAs) {
        if (!this.posterName) {
          this.$message('请输入海报名称')
          return
        }
        if (!this.attrId) {
          this.$message('请选择内容性质')
          return
        }
        if (!this.bg) {
          this.$message('请选择背景图片')
          return
        }
        const $img = this.$refs.bgImg
        const $avatar = this.$refs.avatar
        const $qr = this.$refs.qr
        const scale = this.scale
        const saveFn = (this.id === 'new' || ifSaveAs) ? this.addPoster : this.updatePoster
        const res = await saveFn({
          id: this.id === 'new' ? undefined : this.id,
          posterName: this.posterName,
          posterUrl: this.bg,
          qrCodeWidth: Math.round(this.qrSize * scale),
          qrCodeHeight: Math.round(this.qrSize * scale),
          qrCodeleft: Math.round(($qr.offsetLeft + ($qr.translateX || 0)) * scale),
          qrCodeTop: Math.round(($qr.offsetTop + ($qr.translateY || 0)) * scale),
          iconWidth: Math.round(this.avatarSize * scale),
          iconHeight: Math.round(this.avatarSize * scale),
          iconleft: Math.round(($avatar.offsetLeft + ($avatar.translateX || 0)) * scale),
          iconTop: Math.round(($avatar.offsetTop + ($avatar.translateY || 0)) * scale),
          attributes: this.attrId,
          commonType: this.commonType,
          groupType: this.groupType
        })
        if (res.data.code ===1) {
          this.$message.success('保存成功')
          this.$router.go(-1)
        }
      },
      handleIconSize (type) {
        if(type === 'avatar'){
          this.avatarRangeVisible = true
          this.qrRangeVisible = false
        }else{  //qr
          this.qrRangeVisible = true
          this.avatarRangeVisible = false
        }
      }
    }
  }
</script>
<style lang="scss">
  .poster_edit{
    .box{margin-bottom:15px;padding:15px 15px 0 15px;border:1px solid #ccc}
    .el-row{margin-bottom:8px;}
    .poster_edit_left{float:left;width:426px}
    .poster_edit_preview{
      &{margin-left:450px;position:relative;width:460px;min-height:460px;border:1px solid #ccc;overflow:hidden;}
      img{width:100%;}
      .avatar{position:absolute;left:205px;bottom:160px;line-height:1;z-index:11;border:1px solid #5e6b7c}
      .qr{position:absolute;left:180px;bottom:40px;line-height:1;z-index:11;border:1px solid #5e6b7c}
      .control {display:none;position:absolute;top:2px;right:-28px;width:26px;cursor:pointer;user-select:none;}
      .narrow{top:17px;}
      .avatar:hover .control,.qr:hover .control{display:block;}
    }
  }
</style>
